<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{$t('project.queryCriteria')}}</span></el-col>
      </el-row>
      <popover-set-query @clickShow="clickShow">
        <el-form :inline="true" :model="listQuery" style="padding: 0 20px" :class="{'show':!showI}">
          <el-row style="padding-bottom: 10px">
            <el-col :span="4">
              <div class="w20">
                <div class="labelName">Project No.</div>
                <el-input v-model="listQuery.projectNo" :placeholder="$t('project.placeholder.projectNo')" clearable class="filter-item"></el-input>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="w20">
                <div class="labelName">Project Name</div>
                <el-input v-model="listQuery.projectName" :placeholder="$t('project.placeholder.projectName')" clearable class="filter-item"></el-input>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="w20">
                <div class="labelName">Type</div>
                <yt-select :allList="true" :multiple="true" collapse-tags v-model="listQuery.projectType" :listData="this.$store.getters.allDic.projectType"></yt-select>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="w20">
                <div class="labelName">Account</div>
                <el-select clearable multiple collapse-tags class="yt-multiple" v-model="listQuery.bu" @change="changeBu" :placeholder="$t('placeholder.choose')">
                  <el-option v-for="item in buList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="w20">
                <div class="labelName">Category</div>
                <el-select clearable v-model="listQuery.bg" @change="changeBg" :placeholder="$t('placeholder.choose')">
                  <el-option v-for="item in bgList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="w20">
                <div class="labelName">{{$t('project.isCase')}}</div>
                <yt-select v-model="listQuery.isCase" :listData="this.$store.getters.allDic.NorY" clearable :placeholder="$t('placeholder.choose')"></yt-select>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="w20">
                <div class="labelName">{{$t('project.disbursements')}}</div>
                <dict-select v-model="listQuery.disbursements" code="NorY" clearable></dict-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="w20">
                <div class="labelName">{{$t('project.hasCloseTime')}}</div>
                <div style="display: flex">
                  <dict-select v-model="listQuery.hasCloseTime" code="NorY" clearable style="width: 150px"></dict-select>
                  <span style="margin-left: 5px;line-height: 36px">or</span>
                  <el-date-picker style="width: 100%;margin-left: 5px" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" v-model="listQuery.timeCondition" type="daterange" range-separator="-" :start-placeholder="$t('project.startTime')" :end-placeholder="$t('project.endTime')"></el-date-picker>
                </div>
              </div>
            </el-col>
            <el-col :span="4" style="margin-top: 33px">
              <div class="yt-btn yt-btn-ys" @click="handleFilter">{{ $t('button.search') }}</div>
              <div class="yt-btn btn" @click="reset">{{ $t('button.reset') }}</div>
            </el-col>
          </el-row>
        </el-form>
      </popover-set-query>

    </div>
    <div class="data-list">
      <div class="list-content">
        <div><span>{{$t('project.projectList')}}</span></div>
      </div>
      <div class="list-operation" style="padding-bottom: 0">
        <div v-if="projectEdit" style="margin-bottom: 10px">
           <!--新增-->
          <el-button type="primary" class="yt-btn-ys" @click="dictDialogVisible = true">{{ $t("button.new") }}</el-button>
          <!--更新-->
          <!-- <el-button type="primary" class="yt-btn-ys" @click="update">{{ $t('button.change') }}</el-button> -->
          <!--保存-->
          <el-button type="primary" class="yt-btn-ys" @click="preserve">{{ $t('button.preserve') }}</el-button>
            <!--导出-->
           <el-button  class="yt-btn-ys" type="primary" @click="handleRemit">{{$t('button.export')}}</el-button >
        </div>
        <div>
          <el-table :data="list" :empty-text="$t('placeholder.emptyText')" border class="yt-table yt-temporary" v-loading.body="listLoading" @selection-change="handleSelectionChange" max-height="600" @sort-change="sortDate">
            <el-table-column align="center" label="Sum" width="120" fixed>
              <el-table-column type="selection" align="center" class-name="pd" prop="id" width="60"/>
              <el-table-column type="index" align="center" :label=" $t('project.serialNumber')" class-name="pd" width="60"></el-table-column>
            </el-table-column>
            <el-table-column align="center" :label="subtotal.projectNo" width="150" fixed>
              <el-table-column align="center" label="Project No." prop="projectNo" width="150" sortable="custom" :show-overflow-tooltip="true"/>
            </el-table-column>
            <el-table-column align="center" :label="subtotal.projectName" width="150" fixed>
              <el-table-column align="center" label="Project Name" prop="projectName" class-name="pd" width="150" sortable="custom" :show-overflow-tooltip="true"/>
            </el-table-column>
            <el-table-column align="center" :label="subtotal.departmentNo">
              <el-table-column align="center" :label="$t('project.departmentNo')" class-name="pd" prop="departmentNo" width="150" sortable="custom" :show-overflow-tooltip="true"/>
            </el-table-column>
            <el-table-column align="center" :label="subtotal.departmentName">
              <el-table-column align="center" :label="$t('project.departmentName')" class-name="pd" prop="departmentName" width="150" sortable="custom" :show-overflow-tooltip="true"/>
            </el-table-column>
            <el-table-column align="center" :label="subtotal.bu">
              <el-table-column align="center" label="Account" class-name="pd" width="130" sortable="custom" prop="bu" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <el-select filterable clearable @change="((val)=>{setBg(val, scope.row)})" v-model="scope.row.bu" :placeholder="$t('placeholder.choose')">
                    <el-option v-for="(item, index) in buAndBgList" :key="index" :label="item.bu" :value="item.bu"></el-option>
                  </el-select>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" :label="subtotal.projectType">
              <el-table-column align="center" label="Type" class-name="pd" prop="projectType" width="80" sortable="custom" :show-overflow-tooltip="true"/>
            </el-table-column>
            <el-table-column align="center" :label="subtotal.bg">
              <el-table-column align="center" label="Category" class-name="pd" prop="bg" width="80" sortable="custom" :show-overflow-tooltip="true"/>
            </el-table-column>
            <el-table-column align="center" :label="subtotal.contractIncome">
              <el-table-column align="center" :label="$t('project.contractIncome')" class-name="bg" width="150" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <div style="height: 23px" v-format="'#,##0'">{{ scope.row.contractIncome }}</div>
                </template>
              </el-table-column>
            </el-table-column>

             <el-table-column align="center" :label="subtotal.contractCosts">
              <el-table-column align="center" :label="$t('projectRevenue.dataReport.contractCost')" class-name="bg" width="150" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <div style="height: 23px" v-format="'#,##0'">{{ scope.row.contractCosts }}</div>
                </template>
              </el-table-column>
            </el-table-column>


            <el-table-column align="center" :label="subtotal.contractIncomeAmount">
              <el-table-column align="center" :label="$t('projectRevenue.dataReport.pastYearIncome')" class-name="bg" width="150" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <div style="height: 23px" v-format="'#,##0'">{{ scope.row.contractIncomeAmount }}</div>
                </template>
              </el-table-column>
            </el-table-column>

           
            <el-table-column align="center" :label="subtotal.contractCostAmount">
              <el-table-column align="center" :label="$t('project.contractCostAmount')" class-name="bg" width="150" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <div style="height: 23px" v-format="'#,##0'">{{ scope.row.contractCostAmount }}</div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" :label="subtotal.completionIncomeCount">
              <el-table-column align="center" :label="$t('project.completionIncomeCount')" class-name="bg" width="150" sortable="custom" prop="recognizedCost" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <div style="height: 23px" v-format="'#,##0'">{{ scope.row.completionIncomeCount }}</div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" :label="subtotal.completionCostCount">
              <el-table-column align="center" :label="$t('project.completionCostCount')" class-name="bg" width="150" sortable="custom" prop="recognizedCost" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <div style="height: 23px" v-format="'#,##0'">{{ scope.row.completionCostCount }}</div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" :label="subtotal.predictStartTime">
              <el-table-column align="center" :label="$t('project.predictStartTime')" class-name="bg" prop="predictStartTime" width="150" sortable="custom" :show-overflow-tooltip="true"/>
            </el-table-column>
            <el-table-column align="center" :label="subtotal.predictEndTime">
              <el-table-column align="center" :label="$t('project.predictEndTime')" class-name="bg" prop="predictEndTime" width="150" sortable="custom" :show-overflow-tooltip="true"/>
            </el-table-column>
            <el-table-column align="center" :label="subtotal.closeTime">
              <el-table-column align="center" :label="$t('project.closeTime')" class-name="bg" prop="closeTime" width="150" sortable="custom" :show-overflow-tooltip="true"/>
            </el-table-column>
            <el-table-column align="center" :label="subtotal.country">
              <el-table-column align="center" :label="$t('project.country')" class-name="pd" width="130" sortable="custom" prop="country" :show-overflow-tooltip="true">
                <!-- <template slot-scope="scope">
                  <dict-select :disabled="true" v-model="scope.row.country" code="country" clearable></dict-select>
                </template> -->
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" :label="subtotal.company">
              <el-table-column align="center" :label="$t('project.company')" class-name="pd" width="150" sortable="custom" prop="company" :show-overflow-tooltip="true">
                <!-- <template slot-scope="scope">
                  <dict-select :disabled="true" v-model="scope.row.company" code="company" clearable></dict-select>
                </template> -->
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" :label="subtotal.receiptsDisbursementsValue">
              <el-table-column align="center" :label="$t('project.receiptsDisbursementsValue')" class-name="bg" prop="receiptsDisbursementsValue" width="150" sortable="custom" :show-overflow-tooltip="true"/>
            </el-table-column>
            <el-table-column align="center" :label="subtotal.isCaseValue">
              <el-table-column align="center" :label="$t('project.isCaseValue')" class-name="bg" prop="isCaseValue" width="150" sortable="custom" :show-overflow-tooltip="true"/>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="pagination-container" style="margin-top: 0" v-show="!listLoading">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page.sync="listQuery.page" :page-sizes="[10, 20, 50, 100, 200]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>



<el-dialog :title="$t('bu.newData')" :visible.sync="dictDialogVisible" :close-on-click-modal="false" class="yt-dialogForm-box">
      <el-form ref="form" :model="addData" :inline="true" label-width="100px" class="yt-dialogForm">
         <!--客户編號 -->
        <el-form-item :label="$t('components.popoverSelect.customer.customerNo')">
          <template>
            <popover-select selectType="customer" @input="select" v-model="addData.customerNo"  :placeholder="$t('placeholder.searchKeywords')"></popover-select>
          </template>
        </el-form-item>
             
          <!--專案负责人 -->
        <el-form-item :label="$t('projectRevenue.dataReport.projectEngineer')">
          <template>
             <input  type="hidden" id="projectEngineerId" >
            <input  type="hidden"  id="projectEngineer" >
            <popover-select selectType="user" @input="select" v-model="addData.username"  :placeholder="$t('placeholder.searchKeywords')"></popover-select>
          </template>
        </el-form-item>
     
        <!--專案編號 -->
        <el-form-item :label="$t('projectRevenue.dataReport.projectNo')">
          <template>
            <!-- <popover-select selectType="project" @input="select" v-model="addData.projectNo"  :placeholder="$t('placeholder.searchKeywords')"></popover-select> -->
           <el-input  type="text" size="small" v-model="addData.projectNo"></el-input>
          </template>
        </el-form-item>
        <!--專案名称 -->
        <el-form-item :label="$t('projectRevenue.dataReport.projectName')">
          <template>
            <!-- <popover-select selectType="project" @input="select" v-model="addData.projectNo"  :placeholder="$t('placeholder.searchKeywords')"></popover-select> -->
            <el-input  type="text" size="small" v-model="addData.projectName"></el-input>
          </template>
        </el-form-item>
         <!--部门编号 -->
         <el-form-item :label="$t('bu.departmentNo')">
          <template>
            <!-- <popover-select selectType="project" @input="select" v-model="addData.departmentName"  :placeholder="$t('placeholder.searchKeywords')"></popover-select> -->
            <el-input  type="text" size="small" v-model="addData.departmentNo"></el-input>
          </template>
        </el-form-item>
        <!--部门名称 -->
         <el-form-item :label="$t('bu.departmentName')">
          <template>
            <!-- <popover-select selectType="project" @input="select" v-model="addData.departmentName"  :placeholder="$t('placeholder.searchKeywords')"></popover-select> -->
            <el-input  type="text" size="small" v-model="addData.departmentName"></el-input>
          </template>
        </el-form-item>

          <!--Category -->
         <el-form-item label="Category">
          <template>
             <el-select clearable v-model="addData.bu" @change="changeBu1" :placeholder="$t('placeholder.choose')">
                  <el-option v-for="item in buList1" :key="item" :label="item" :value="item"></el-option>
                </el-select>
          </template>
        </el-form-item>

         <!--Type -->
         <el-form-item label="Type">
          <template>
            <yt-select :allList="true" collapse-tags v-model="addData.projectType" :listData="this.$store.getters.allDic.projectType">
            </yt-select>
          </template>
        </el-form-item>
        <!--BU -->
        <el-form-item label="BU">
          <template>
            <el-select clearable v-model="addData.bg" @change="changeBg1" :placeholder="$t('placeholder.choose')">
                  <el-option v-for="item in bgList1" :key="item" :label="item" :value="item"></el-option>
                </el-select>
          </template>
        </el-form-item>

      <!--合约收入 -->
        <el-form-item :label="$t('projectRevenue.dataReport.contractIncome')">
          <div v-check-submit tabindex="0">
            <el-input style="display: none" type="number" v-model="addData.contractIncome"></el-input>
            <div class="box1" style="border: 1px solid #dcdfe6;text-align: left" v-format="'#,##0'" :placeholder="$t('placeholder.content')">{{addData.contractIncome}}</div>
          </div>
        </el-form-item>
      <!--合约成本 -->
      <el-form-item :label="$t('projectRevenue.dataReport.contractCost')">
          <div v-check-submit tabindex="0">
            <el-input style="display: none" type="number" v-model="addData.contractCosts"></el-input>
            <div class="box1" style="border: 1px solid #dcdfe6;text-align: left" v-format="'#,##0'" :placeholder="$t('placeholder.content')">{{addData.contractCosts}}</div>
          </div>
        </el-form-item>
          <!--以前年度认列收入 contractIncomeAmount-->
         <el-form-item :label="$t('projectRevenue.dataReport.pastYearIncome')">
          <div v-check-submit tabindex="0">
            <el-input style="display: none" type="number" v-model="addData.contractIncomeAmount"></el-input>
            <div class="box1" style="border: 1px solid #dcdfe6;text-align: left" v-format="'#,##0'" :placeholder="$t('placeholder.content')">{{addData.contractIncomeAmount}}</div>
          </div>
        </el-form-item>
          <!--以前年度认列成本 contractCostAmount-->
        <el-form-item :label="$t('project.contractCostAmount')">
          <div v-check-submit tabindex="0">
            <el-input style="display: none" type="number" v-model="addData.contractCostAmount"></el-input>
            <div class="box1" style="border: 1px solid #dcdfe6;text-align: left" v-format="'#,##0'" :placeholder="$t('placeholder.content')">{{addData.contractCostAmount}}</div>
          </div>
        </el-form-item>
        <!--完工金額-->
        <el-form-item :label="$t('project.completionIncomeCount')">
          <div v-check-submit tabindex="0">
            <el-input style="display: none" type="number" v-model="addData.completionIncomeCount"></el-input>
            <div class="box1" style="border: 1px solid #dcdfe6;text-align: left" v-format="'#,##0'" :placeholder="$t('placeholder.content')">{{addData.completionIncomeCount}}</div>
          </div>
        </el-form-item>
        <!--完工成本 -->
        <el-form-item :label="$t('project.completionCostCount')">
          <div v-check-submit tabindex="0">
            <el-input style="display: none" type="number" v-model="addData.completionCostCount"></el-input>
            <div class="box1" style="border: 1px solid #dcdfe6;text-align: left" v-format="'#,##0'" :placeholder="$t('placeholder.content')">{{addData.completionCostCount}}</div>
          </div>
        </el-form-item>
        <!--預計開始日 predictStartTime--> 
        <el-form-item :label="$t('project.predictStartTime')">
            <el-input style="display: none" type="text" v-model="addData.predictStartTime"></el-input>
            <el-date-picker v-model="addData.predictStartTime" :placeholder="$t('placeholder.content')" class="dateTime yt-table-picker" type="date" :value-format="format" :format="format"/>
        </el-form-item>

          <!--預計完工日 predictEndTime--> 
        <el-form-item :label="$t('project.predictEndTime')">
            <el-input style="display: none" type="text" v-model="addData.predictEndTime"></el-input>
            <el-date-picker v-model="addData.predictEndTime" :placeholder="$t('placeholder.content')" class="dateTime yt-table-picker" type="date" :value-format="format" :format="format"/>
        </el-form-item>

         <!--結案日--> 
        <el-form-item :label="$t('project.closeTime')">
            <el-input style="display: none" type="text" v-model="addData.closeTime"></el-input>
            <el-date-picker v-model="addData.closeTime" :placeholder="$t('placeholder.content')" class="dateTime yt-table-picker" type="date" :value-format="format" :format="format"/>
        </el-form-item>

        <!--區域別 -->
         <el-form-item :label="$t('cashFlowForm.country')">
            <el-input style="display: none" type="text" v-model="addData.country"></el-input>
            <dict-select v-model="addData.country" code="country" :clearable="true" @change="setBg"></dict-select>
         </el-form-item>

        <!--公司別 -->
        <el-form-item :label="$t('cashFlowForm.company')">
          <el-select clearable class="filter-item" v-model="addData.company"  :placeholder="$t('cashFlowForm.placeholder.content')">
            <el-option v-for="item in companyList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

      <!--是否收付完成 -->
       <el-form-item :label="$t('project.disbursements')">
            <dict-select v-model="addData.receiptsDisbursements" code="NorY" clearable></dict-select>
        </el-form-item>


      <!--成案否 -->
      <el-form-item :label="$t('project.isCase')">
            <yt-select v-model="addData.isCase" :listData="this.$store.getters.allDic.NorY" clearable :placeholder="$t('placeholder.choose')"></yt-select>
        </el-form-item>

      <!--认列方式 -->
      <el-form-item :label="$t('projectRevenue.dataReport.identifyType')">
          <yt-select v-model="addData.identifyType" :listData="this.$store.getters.allDic.identifyType" clearable :placeholder="$t('placeholder.choose')"></yt-select>
      </el-form-item>
     
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dictDialogVisible = false">{{
          $t("button.cancel")
        }}</el-button>
        <el-button type="primary" @click="insertData">{{
          $t("button.determine")
        }}</el-button>
      </span>
</el-dialog>

  </div>
</template>

<script>
  import popoverSelect from '@/components/popover-select/index.vue';
  import { page, savaListProject,insertProject, updateCompletion } from '@/api/project/index';
  import formatter from '@/utils/formatter';
  import { selectBuAndBg, selectBg, selectBu, listbgAndbu } from '@/api/bu/index';
  import popoverSetQuery from '@/components/popover-setQuery/index.vue';
  import { mapGetters } from 'vuex';
  import YtGetTemplateSelect from '@/components/Yt-template/getTemplateSelect.vue';
  import mixins from '@/mixins/yt-table-title';

  export default {
    name: 'project',
    components: {
      popoverSetQuery,
      popoverSelect,
      YtGetTemplateSelect,
      'dict-select': () => import('@/components/Dict/dictValueSelect'),
      'yt-select': () => import('@/components/Yt-select/index')
    },
    props: {
      format: {
        // 时间格式
        type: String,
        default: 'yyyy-MM-dd'
      }
    },
    data() {
      return {
        showI: true,
        ss: [],
        bgList: [],
        bgList1: [],
        buAndBgList: [],
        buList: [],
        buList1: [],
        formatter,
        config: Config.I18n,
        total: 0,
        listLoading: true,
        list: [],
        subtotal: {},
        listAll: this.$store.getters.allDic,
        listMapAll: this.$store.getters.allMapDic,
        listQuery: {
          order: '', // 降序（desc）/升序（asc）
          orderBy: '', // 排序字段
          page: 1,
          limit: 10,
          isProjectQuery: '1',
          projectNo: '',
          projectName: '',
          projectType: '',
          bu: '',
          bg: '',
          isCase: '',
          hasCloseTime: '',
          timeCondition: []
        },
        selectionList: [],
        isCaseOptions: [],
        typeOptions: [],
        options: null,
        select: [],
        radio1: '',
        projectEdit: false,
        dictDialogVisible: false,
        addData: {
          dataYear: '',
          projectCode: '',
          pastYearIncome: '',
        },
        companyList: this.$store.getters.allDic.company,
        modification: []
      };
    },
    computed: {
      ...mapGetters(['elements'])
    },
    methods: {
      // select(val, row) {
      //   console.info(row , val)
      //   this.addData.projectId = row.id
      // },
      clickShow(val) {
        this.showI = val
      },
      setBg(val, row) {
        for (let i = 0; i < this.buAndBgList.length; i++) {
          if (this.buAndBgList[i].bu === val) {
            row.buId = this.buAndBgList[i].id;
            row.bu = this.buAndBgList[i].bu;
            row.bg = this.buAndBgList[i].bg;
            row.country = this.buAndBgList[i].country;
            row.company = this.buAndBgList[i].company;
            break;
          }
        }
      },
         // 新增
      insertData() {
        if (!this.addData.projectNo) {
          this.$message({
            message: this.$t('projectRevenue.dataReport.noProjectCode'),
            type: 'error'
          })
          return
        }
        if (!this.addData.username) {
              this.$message({
                message: this.$t('projectRevenue.dataReport.projectEngineer'),
                type: 'error'
              })
              return
        }
         if (!this.addData.identifyType) {
              this.$message({
                message: this.$t('projectRevenue.dataReport.identifyType'),
                type: 'error'
              })
              return
        }
        this.addData.projectEngineer = $('#projectEngineer').val()
        this.addData.projectEngineerId = $('#projectEngineerId').val()
        this.addData.customerCode = this.addData.customerNo
    
        insertProject(this.addData).then(res => {
          if (res.status === 200) {
            this.$notify({
              title: this.$t('tips.success'),
              message: this.$t('tips.addSuccess'),
              type: 'success',
              duration: 2000
            });
            this.dictDialogVisible = false
            this.addData = {}
            this.getList()
          } else {
            this.$notify({
              title: this.$t('bu.tips.fail'),
              message: res.message,
              type: 'warning'
            });
          }
        })
      },
      getBuAndBg() {
        selectBuAndBg().then(res => {
          this.buAndBgList = res.data;
        });
      },
      getBu() {
        selectBu().then(res => {
          this.buList = res.data;
        });
      },
       getBu1() {
        selectBu().then(res => {
          this.buList1 = res.data;
        });
      },
      getList() {
        this.listLoading = true;
        // 当选择结案时间没有的时候,删除结案时间的时间范围查询条件
        if (this.listQuery.hasCloseTime === '0') {
          if (this.listQuery.startTime) {
            delete this.listQuery.startTime;
          }
          if (this.listQuery.endTime) {
            delete this.listQuery.endTime;
          }
        } else {
          if (this.listQuery.timeCondition && Array.isArray(this.listQuery.timeCondition) && this.listQuery.timeCondition.length === 2) {
            this.listQuery.startTime = this.listQuery.timeCondition[0];
            this.listQuery.endTime = this.listQuery.timeCondition[1];
          }
        }
        this.listQuery.isProjectQuery = '1'
        page(this.listQuery).then(response => {
          if (response.data.rows && response.data.rows.length > 0) {
            this.list = response.data.rows;
            this.subtotal = response.data.subtotal
            Object.keys(this.subtotal).forEach(key => {
              this.subtotal[key] = String(this.subtotal[key]).replace(/\d{1,3}(?=(\d{3})+(\.|$))/g, '$&,')
            })
            for (let i = 0; i < this.list.length; i++) {
              // 转换
              this.list[i].receiptsDisbursementsValue = this.listMapAll.NorY[this.list[i].receiptsDisbursements];
              this.list[i].isCaseValue = this.listMapAll.NorY[this.list[i].isCase];

              this.list[i].country = this.listMapAll.country[this.list[i].country];
              this.list[i].company = this.listMapAll.company[this.list[i].company];
            }
          } else {
            this.list = [];
            this.subtotal = {};
          }
          this.total = response.data.total;
          this.listLoading = false;
        })
      },
        handleRemit() {
           
        const str = '?projectNo=' + this.listQuery.projectNo + '&projectName=' + this.listQuery.projectName + '&projectType=' + this.listQuery.projectType + '&bu=' + this.listQuery.bu + '&isCase=' + this.listQuery.isCase + '&hasCloseTime=' + this.listQuery.hasCloseTime + '&disbursements=' + this.listQuery.disbursements + '&isProjectQuery=' + this.listQuery.isProjectQuery  + '&startTime=' + this.listQuery.startTime + '&endTime=' + this.listQuery.endTime;
        const a = document.createElement('a');
        const href = '/api/admin/excel/exportProject' + str;
        a.download = Date.now();
        a.href = href;
        a.click();
      },
      // 更新数据
      update() {
        if (this.selectionList.length <= 0) {
          this.$notify({
            title: this.$t('scheduleManager.progressList.fail'),
            message: this.selectionList.length <= 0 ? this.$t('scheduleManager.progressList.updateTipsOne') : this.$t('scheduleManager.progressList.updateTipsTwo'), // '您还未选择' : '您只能选择一条数据进行编辑修改'
            type: 'warning'
          });
          return;
        }

        updateCompletion(this.selectionList).then(res => {
          this.$notify({
            title: res.status === 200 ? this.$t('tips.success') : this.$t('tips.fail'),
            message: res.status === 200 ? this.$t('tips.success') : this.$t('tips.fail'),
            type: res.status === 200 ? 'success' : 'warning'
          });

          this.getList();
        })
      },
      // 保存
      preserve() {
        this.list.forEach(key => {
          delete key.closeTime;
        });

        savaListProject(this.list).then(res => {
          this.getList();
          this.$notify({
            title: res.status === 200 ? this.$t('tips.success') : this.$t('tips.fail'),
            message: res.data,
            type: res.status === 200 ? 'success' : 'warning'
          });
        });
      },
      handleSelectionChange(val) {
        //  表格序号选中函数
        this.selectionList = val;
      },
      reset() {
        this.listQuery = {
          page: 1,
          limit: 10,
          projectNo: '',
          projectName: '',
          projectType: [],
          bu: [],
          bg: '',
          isCase: '',
          hasCloseTime: '',
          timeCondition: []
        };
        this.getList();
        this.getBu();
        this.getBg();
      },
      handleFilter() {
        this.getList();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      getBg() {
        selectBg().then(res => {
          this.bgList = res.data;
        });
      },
      getBg1() {
        selectBg().then(res => {
          this.bgList1 = res.data;
        });
      },
      changeBu(val) {
        if(val =='' || val==null){
            this.getBg();
            return
        }
        // 联动bg
        const srt = val.join(',');
        listbgAndbu({ bu: srt, bg: '' }).then(res => {
          this.bgList = res.data;
        });
      },
      changeBu1(val) {
         if(val =='' || val==null){
            this.getBg1();
            return
        }
        // 联动bg
        listbgAndbu({ bu: val, bg: '' }).then(res => {
          this.bgList1 = res.data;
        });
      },
      changeBg(val) {
        if(val =='' || val==null){
            this.getBu();
            return
        }
        // 联动bu
        listbgAndbu({ bu: '', bg: val }).then(res => {
          this.buList = res.data;
        });
      },
      changeBg1(val) {
         if(val =='' || val==null){
            this.getBu1();
            return
        }
        // 联动bu
        listbgAndbu({ bu: '', bg: val }).then(res => {
          this.buList1 = res.data;
        });
      },
      // 排序
      sortDate(column) {
        // this.formatter.sortByKey(this.list, column.prop, column.order)
        console.log('column', column);
        // this.formatter.sortByKey(this.list, column.prop, column.order)
        if (column.order === 'ascending') {
          this.listQuery.order = 'asc';
        } else if (column.order === 'descending') {
          this.listQuery.order = 'desc';
        }
        if (column.prop === 'isCaseValue') {
          this.listQuery.orderBy = 'isCase';
        } else if (column.prop === 'receiptsDisbursementsValue') {
          this.listQuery.orderBy = 'receiptsDisbursements';
        } else {
          this.listQuery.orderBy = column.prop;
        }
        this.getList()
      }
    },
    created() {
      this.projectEdit = this.elements['project.edit']
      this.getBu();
      this.getBu1();
      this.getBuAndBg();
      this.getBg();
      this.getBg1();
      this.getList();
    }
  };
</script>
<style scoped lang="scss">
  .btn {
    margin-left: 12px;
  }
  // .box{
  //   padding: 0 15px !important;
  //   height: 36px;
  //   line-height: 36px;
  //   text-align: center;
  //   border-radius: 4px;
  //   color: #333;
  // }
  // .box:empty:before{
  //   content: attr(placeholder);
  //   color: #c0c4cc;
  //   font-size: 14px;
  // }
  .box{
    /* border: 1px solid #d9d9d9; */
    padding: 0 15px !important;
    height: 36px;
    line-height: 36px;
    text-align: left;
    border-radius: 4px;
    color: #333;
    cursor:text;
    font-size: 12px;
  }
  .box:empty:before{
    content: attr(placeholder);
    color: #c0c4cc;
    font-size: 14px;
  }


  .box1{
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 4px;
    color: #333;
    cursor:text;
    padding:0 15px;
  }
  .box1:empty:before{
    content: attr(placeholder);
    color: #c0c4cc;
    font-size: 12px;
  }
</style>
